<template>
<div>
  <el-card style="background-color: #eaedf1">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>个人中心</el-breadcrumb-item>
    </el-breadcrumb>

    <el-row style="margin-top: 50px;height: 500px;">
      <el-col :span="10" style="width: 300px;height: 550px;background-color: #ffffff;border-radius: 15px">
        <el-menu
            style="width: 300px;text-align: center;border-radius: 15px"
            :default-active="userInfo"
            class="el-menu-vertical-demo"
            router>
          <el-menu-item index="/personal/import">
            <i class="el-icon-user"></i>
            <span slot="title" style="margin-left: 10px">用户导入</span>
          </el-menu-item>

          <el-menu-item index="/personal/userinfo">
            <i class="el-icon-info"></i>
            <span slot="title" style="margin-left: 10px">个人信息</span>
          </el-menu-item>

          <el-menu-item index="/personal/changepwd">
            <i class="el-icon-lock"></i>
            <span slot="title" style="margin-left: 10px">修改密码</span>
          </el-menu-item>
        </el-menu>
      </el-col>

      <el-col :span="14" style="margin-left: 100px;height: 550px;background-color: #fff;border-radius: 15px; position: relative">
        <router-view></router-view>
      </el-col>
    </el-row>
  </el-card>
</div>
</template>

<script>
export default {
  name: "personal",
  data() {
    return {
      userInfo: '/personal/userinfo'
    }
  }
}
</script>

<style scoped>

</style>
